'use client';

import { cn } from '@/lib/utils';
import { useEffect, useState } from 'react';

export interface GlassNavbarProps {
  children: React.ReactNode;
  className?: string;
}

/**
 * GlassNavbar - Apple-style frosted glass navigation bar
 * 
 * Features:
 * - Fixed position at top
 * - Blur effect on scroll
 * - Background opacity changes with scroll
 * - Smooth transitions
 */
export default function GlassNavbar({ children, className }: GlassNavbarProps) {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav
      className={cn(
        'glass-navbar',
        scrolled && 'scrolled',
        'px-6 py-4 mx-4 mt-4 rounded-2xl',
        'transition-all duration-300 ease-in-out',
        'z-50',
        className
      )}
    >
      <div className="max-w-full mx-auto">
        {children}
      </div>
    </nav>
  );
}

